<!--
 * @Author: [you name]
 * @Date: 2021-11-05 10:52:31
 * @LastEditors: [you name]
 * @LastEditTime: 2021-11-08 10:39:19
 * @Description: 
-->
<template>
  <div class="article">
    <!-- 查找区域 -->
    <div class="found">
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
        size="small"
      >
        
        <el-form-item>
          <el-select
            v-model="queryParams.categoryId"
            clearable
            placeholder="请选择风采"
          >
            <el-option
              v-for="(item, index) in categories"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
       
        <el-form-item>
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="请选择状态"
          >
            <el-option label="未审核" value="未审核"></el-option>
            <el-option label="审核通过" value="审核通过"></el-option>
            <el-option label="审核不通过" value="审核不通过"></el-option>
            <el-option label="推荐" value="推荐"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pageQueryInfoAeticle">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData.list" style="width: 100%">
      <el-table-column type="index" label="序号" width="180"> </el-table-column>
    <el-table-column label="封面">
        <template v-slot="scope">
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
          >
            <img :src="scope.row.cover" width="200px" />
            <img slot="reference" :src="scope.row.cover" alt="" width="50px" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="风采" width="180"> </el-table-column>
      
      <el-table-column label="状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == '审核通过'" type="success" size="mini"
            >{{ scope.row.status }}
          </el-tag>
          <el-tag v-else type="danger" size="mini"
            >{{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
             <el-button type="text" @click="toRecom(scope.row.id)"
              >推荐</el-button
            >
            <el-button type="text" @click="toExam(scope.row)">审核</el-button>
          <el-button
          type="text"
          @click="toDeleteHandler(scope.row.id)"
          style="color: #e65d6e"
          >删除</el-button
        >
          
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页查询 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableData.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="tableData.size"
      layout="total, sizes, prev, pager, next"
      :total="tableData.total"
    >
    </el-pagination>
    <!-- 审核的模态框 -->
    <div>
      <el-dialog
        title="审核风采信息"
        :visible.sync="examVisible"
        id=""
        th="60%"
      >
        <h3>{{ this.artTitle }}</h3>
        <div v-html="this.artContent"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="examNoPass">审核不通过</el-button>
          <el-button type="primary" @click="examPass">审核通过</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      tableData: {},
      queryParams: {
        page: 1,
        pageSize: 10,
      },
       // 资讯信息的内容数据
      art: {
        artID: "",
        artTitle: "",
        artContent: "",
      },
      examVisible: false,
    };
  },
  //   静态属性
  computed: {
    ...mapState("article", ["categories"]),
  },
  methods: {
    ...mapActions("article", ["findAllArticleCategories"]),
    // 分页查询顾客账单信息
    pageQueryInfoAeticle() {
      // 过滤查询参数，将空字符串的键值对删除掉
      for (let key in this.queryParams) {
        if (this.queryParams[key] == "") {
          delete this.queryParams[key];
        }
      }
    //   console.log(this.queryParams);
      request
        .get("/article/pageQuery", {
          params: this.queryParams,
        })
        .then((res) => {
          this.tableData = res.data;
        });
    },
    // 上传插件成功的回调
    handleUploadSuccess(res, file) {
      // 将文件服务器响应的图片在线地址，设置到category
      this.category.cover = res;
      // 将成功上传的图片设置到预览标签上去
      this.imageUrl = res;
    },
    // 删除按钮
    toDeleteHandler(id) {
      // 点击删除按钮弹出提示框
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //   根据路由/baseUser/deleteById 的id删除信息
        request
          .get("/article/deleteById", {
            params: {
              id,
            },
          })
          .then((res) => {
            //   重载数据
            this.pageQueryInfoAeticle();
            this.$message({
              message: res.message,
              type: "success",
            });
          });
      });
    },
    //点击推荐按钮
    toRecom(id) {
      this.artID = id;
      this.$confirm("您确定要推荐此资讯吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await changeStatus({ id: this.artID, status: "推荐" });
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "推荐成功",
            });
          }
          this.status = "推荐";
          this.pageQueryInfoAeticle();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消推荐",
          });
        });
    },
    //点击审核按钮
    toExam(row) {
      this.examVisible = true;
      this.artID = row.id;
      this.artTitle = row.title;
      this.artContent = row.content;
    },
    // 分页size-change事件
    handleSizeChange(pageSize) {
      // 点击分页容量，将最新的pageSize设置到数据模板
      this.queryParams.pageSize = pageSize;
      // 重新调用分页查询的方法，做数据重载
      this.pageQueryInfoAeticle();
    },
    // 分页current-change事件
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.pageQueryInfoAeticle();
    },
  },
  created() {
    this.pageQueryInfoAeticle(); //分页查询顾客账单
    this.findAllArticleCategories();
  },
};
</script>

<style>
</style>
